<template>
  <div class="progress-container">
    <van-nav-bar
      title="学习进度"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 学习统计 -->
    <div class="statistics-section">
      <div class="statistics-grid">
        <div class="stat-item">
          <div class="stat-value">{{ stats.totalTime }}</div>
          <div class="stat-label">总学习时长</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ stats.todayTime }}</div>
          <div class="stat-label">今日学习</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ stats.coursesCount }}</div>
          <div class="stat-label">在学课程</div>
        </div>
      </div>
    </div>

    <!-- 学习日历 -->
    <div class="calendar-section">
      <div class="section-title">学习日历</div>
      <van-calendar
        :poppable="false"
        :show-confirm="false"
        :style="{ height: '320px' }"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="calendarFormatter"
      />
    </div>

    <!-- 课程进度列表 -->
    <div class="progress-list">
      <div class="section-title">课程进度</div>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="course-item" v-for="course in courseList" :key="course.id" @click="onViewCourse(course)">
          <div class="course-info">
            <div class="course-image">
              <img :src="course.image" :alt="course.name">
            </div>
            <div class="course-detail">
              <div class="course-title">{{ course.name }}</div>
              <div class="progress-info">
                <div class="progress-bar">
                  <van-progress
                    :percentage="course.progress"
                    :stroke-width="4"
                    :show-pivot="false"
                    color="#4fc08d"
                    track-color="#e8f5e9"
                  />
                </div>
                <div class="progress-text">已完成 {{ course.progress }}%</div>
              </div>
              <div class="course-meta">
                <span class="last-learn">上次学习：{{ course.lastLearnTime || '暂无' }}</span>
                <span class="duration">时长：{{ course.duration || '0分钟' }}</span>
              </div>
            </div>
          </div>
          <div class="course-action">
            <van-button 
              size="small" 
              type="primary" 
              color="#4fc08d"
              @click.stop="onContinueLearning(course)"
            >继续学习</van-button>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 学习统计数据
const stats = ref({
  totalTime: '120小时',
  todayTime: '2小时',
  coursesCount: '5'
})

// 日历配置
const minDate = new Date(2023, 0, 1)
const maxDate = new Date()

// 日历格式化
const calendarFormatter = (day) => {
  // 模拟学习天数数据
  const learningDays = ['2023/8/1', '2023/8/2', '2023/7/31', '2023/7/30']
  const date = `${day.year}/${day.month}/${day.day}`
  
  if (learningDays.includes(date)) {
    return {
      className: 'learning-day',
      bottomInfo: '已学习'
    }
  }
  return day
}

// 列表状态
const loading = ref(false)
const finished = ref(false)
const courseList = ref([])

// 模拟课程数据
const mockCourses = [
  {
    id: 1,
    name: '高中数学提高班 - 函数与导数专题',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    progress: 75,
    learnedCount: 15,
    totalCount: 20,
    duration: '16小时',
    lastLearnTime: '2023-08-01'
  },
  {
    id: 2,
    name: '英语口语训练营 - 零基础到流利表达',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    progress: 45,
    learnedCount: 9,
    totalCount: 20,
    duration: '8小时',
    lastLearnTime: '2023-07-31'
  },
  {
    id: 3,
    name: 'Python编程基础 - 从入门到实践',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    progress: 30,
    learnedCount: 6,
    totalCount: 20,
    duration: '4小时',
    lastLearnTime: '2023-07-30'
  }
]

// 加载更多
const onLoad = () => {
  setTimeout(() => {
    courseList.value.push(...mockCourses)
    loading.value = false
    finished.value = true
  }, 1000)
}

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 查看课程详情
const onViewCourse = (course) => {
  router.push(`/course/${course.id}`)
}

// 继续学习
const onContinueLearning = (course) => {
  router.push(`/course/${course.id}/learn`)
}
</script>

<style lang="scss" scoped>
@use '../../styles/mixins.scss' as *;

.progress-container {
  min-height: 100vh;
  background-color: #f7f8fa;

  .statistics-section {
    background: linear-gradient(135deg, #4fc08d 0%, #42b983 100%);
    padding: 24px 16px;
    margin-bottom: 12px;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 12px rgba(79, 192, 141, 0.1);

    .statistics-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;

      .stat-item {
        text-align: center;
        padding: 12px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        backdrop-filter: blur(5px);

        .stat-value {
          font-size: 24px;
          font-weight: 600;
          color: #ffffff;
          margin-bottom: 6px;
        }

        .stat-label {
          font-size: 13px;
          color: rgba(255, 255, 255, 0.9);
        }
      }
    }
  }

  .calendar-section {
    background: #fff;
    padding: 20px 16px;
    margin: 0 12px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #323233;
      margin-bottom: 16px;
    }

    :deep(.van-calendar) {
      box-shadow: none;
      
      .van-calendar__header {
        box-shadow: none;
      }

      .learning-day {
        background-color: rgba(79, 192, 141, 0.1);
        border-radius: 4px;

        .van-calendar__bottom-info {
          color: #4fc08d;
        }
      }
    }
  }

  .progress-list {
    background: #fff;
    margin: 0 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    .section-title {
      padding: 20px 16px;
      font-size: 16px;
      font-weight: 600;
      color: #323233;
      border-bottom: 1px solid #f5f5f5;
    }

    .course-item {
      padding: 16px;
      @include flex(row, space-between);
      border-bottom: 1px solid #f5f5f5;
      transition: all 0.3s ease;

      &:hover {
        background-color: #f7f8fa;
      }

      &:last-child {
        border-bottom: none;
      }

      .course-info {
        flex: 1;
        @include flex(row);
        margin-right: 16px;
        overflow: hidden;

        .course-image {
          width: 120px;
          height: 80px;
          margin-right: 16px;
          border-radius: 8px;
          overflow: hidden;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .course-detail {
          flex: 1;
          overflow: hidden;

          .course-title {
            font-size: 16px;
            font-weight: 500;
            color: #323233;
            margin-bottom: 12px;
            @include text-ellipsis;
          }

          .progress-info {
            margin-bottom: 8px;

            .progress-bar {
              margin-bottom: 6px;
            }

            .progress-text {
              font-size: 13px;
              color: #4fc08d;
            }
          }

          .course-meta {
            font-size: 12px;
            color: #969799;

            .last-learn {
              margin-right: 16px;
            }
          }
        }
      }

      .course-action {
        :deep(.van-button) {
          padding: 0 20px;
          height: 32px;
          font-size: 13px;
          font-weight: 500;
          border-radius: 16px;
        }
      }
    }
  }

  .empty-state {
    padding: 60px 0;
    text-align: center;

    .empty-icon {
      width: 120px;
      height: 120px;
      margin-bottom: 16px;
    }

    .empty-text {
      font-size: 14px;
      color: #969799;
    }
  }
}
</style>
